import Vue from 'vue'
import Vuex from 'vuex'
// 模块化使用得导入模块
import user from './modules/user'
import setting from './modules/setting'
// 1. 装包vuex
// 2. 新建 store文件夹放vuex相关的东西
// 3. 在vuex/index.js 中初始化仓库   
// 4. 在main.js中导入挂载到vue实例上
Vue.use(Vuex)

const store = new Vuex.Store({
    // state 是状态  等同于 vuex存放的数据 相当于 vue组件中的data
    // 区别  data: 是组件自己的数据
    // state是vuex的数据 整个vue实例所有组件都能访问到

    // 使用的时候分为两种形式
    // 1. 通过this.$store(使用在vue组件当中)获取state中的数据,通常通过computed返回
    // 2. mapState函数快速获取state数据
    //  mapState([
    // 映射 this.count 为 store.state.count
    //   'count'
    // ])

    // mutations 修改state数据的步骤 永远都是同步代码没有异步操作
    // 1. 定义mutations对象,内部写修改方法
    // 2. 组件中使用的使用通过 this.$store.commit('mutations名字')
    // 注意: mutations里面的方法可以传递参数,参数只能一个 类型可以随意(相当于可以随意传值)

    // actions  可以做异步操作
    // 1. 定义actions对象,内部有异步操作
    // 2. 组件内使用通过 this.$store.dispatch('action名字)

    // getters  类似计算属性
    // 1. 定义getters对象,内部定义函数 函数必须有返回值
    // 2. 组件内使用 this.$store.getters.getters的名字

    // modules 模块化
    // 1. 定义modules对象, key: value 的形式注册
  state: {
    count: 0,
    msg: 'vuex很简单',
    list: [1,2,3,4,5,6,7,8,9,10]
  },
  getters: {
    // 第一个参数是 state
    filterList (state) {
      return state.list.filter(item =>  item >5)
    }
  },
  mutations: {
    addCount(state, n) {

        state.count += n
    },
    setCount(state, count) {
        state.count = +count
    }
  },
  actions: {
    // 第一个参数: 上下文 (this) 第二个参数 形参
    changeCountAsync(context, num) {
      // 一秒后修改count
      setTimeout(() => {
        context.commit('setCount', num)
      }, 1000)
    }
  },
  modules: {
    user,
    setting
  }
})

export default store

